<!--
 * @Author: hye0228 1261769443@qq.com
 * @Date: 2022-10-09 16:14:38
 * @LastEditors: hye0228 1261769443@qq.com
 * @LastEditTime: 2022-10-12 09:33:57
 * @FilePath: \v2.0.0\src\components\MyTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-table
    :data="data"
    :header-cell-style="
      () => ({
        backgroundColor: '#f3f3f3',
      })
    "
    border
    :max-height="maxHeight"
    @selection-change="handleSelectionChange"
  >
    <el-table-column v-if="isShowSelection" type="selection" width="55">
    </el-table-column>
    <el-table-column
      v-for="col in columns"
      :key="col.prop"
      :prop="col.prop"
      :label="col.label"
      align="center"
      header-align="center"
      :formatter="col.formatter"
      :width="col.width"
      :min-width="col.minWidth"
    >
      <template #default="scope">
        <template v-if="col.customRender">
          <CustomRender
            :render="() => col.customRender(scope.row)"
          ></CustomRender>
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import CustomRender from "./CustomRender.jsx";

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  maxHeight: {
    type: Number,
    default: 500,
  },
  isShowSelection: {
    type: Boolean,
    default: true,
  },
});

// 多选
const emit = defineEmits(["confirm"]);

function handleSelectionChange(val) {
  emit("confirm", val);
}
</script>
